<template>
  <div v-if="data" class="search_item_div">
    <div
      class="search_item"
      v-for="item in data"
      :key="item.id"
      :class="chooes_item == item.id ? 'chooesed' : ''"
      @click="item_click(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  name: "SearchItem",
  props: ["data"],
  data() {
    return {
      // 记录当前被选中的itemid
      chooes_item: "",
    };
  },
  methods: {
    item_click(val) {
      // 被点击了 将 点击的itme  数据 传递给父级
      this.$emit("item_click",val);
      // 将 当前选中的项  记录下来
      this.chooes_item = val.id;
    },
    // 清除数据
    clearData(){
      this.chooes_item = "";
    }
  },
};
</script>
<style lang="less" scoped>
.search_item {
  display: inline-block;
  font-size: 0.14rem;
  width: 1.725rem;
  height: 0.42rem;
  border-radius: 0.05rem;
  background-color: #f5f5f5;
  text-align: center;
  line-height: 0.42rem;
  overflow: hidden;
  margin: 0rem 0.03rem;
}

.chooesed {
  position: relative;
  background-color: #ffffff;
  border: 0.01rem solid #e74e4b;
  color: #e74e4b;
}

.chooesed::after {
  content: "";
  position: absolute;
  top: -0.01rem;
  right: 0rem;
  width: 0.2rem;
  height: 0.15rem;
  background: url("../../../assets/img/home/search_close.svg") no-repeat;
  background-size: 100% 100%;
  border-radius: 0rem 0.05rem 0rem 0rem;
}

.search_item_div {
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>